<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="dialogForm" label-width="100px" label-position="right">
			<el-row>
				<el-col :span="12">
					<el-form-item label="头像" prop="avatar">
						<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="form.username" placeholder="登录账号" :disabled="mode!=='add'"
								  clearable></el-input>
					</el-form-item>
					<template v-if="mode==='add'">
						<el-form-item label="登录密码" prop="password">
							<el-input type="password" v-model="form.password" placeholder="登录密码" clearable
									  show-password></el-input>
						</el-form-item>
					</template>
					<el-form-item label="昵称" prop="nickname">
						<el-input v-model="form.nickname" placeholder="昵称" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="手机号" prop="mobile">
						<el-input v-model="form.mobile" placeholder="手机号" clearable></el-input>
					</el-form-item>
					<el-form-item label="所属角色" prop="roleIdList">
						<el-select v-model="form.roleIdList" multiple filterable style="width: 100%">
							<el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"/>
						</el-select>
					</el-form-item>
					<el-form-item label="所属岗位" prop="postIdList">
						<el-select v-model="form.postIdList" multiple filterable style="width: 100%">
							<el-option v-for="item in postList" :key="item.id" :label="item.postName" :value="item.id"/>
						</el-select>
					</el-form-item>
					<el-form-item label="姓名" prop="realName">
						<el-input v-model="form.realName" placeholder="真实姓名" clearable></el-input>
					</el-form-item>
					<el-form-item label="出生日期" prop="birthdate">
						<el-date-picker v-model="form.birthDate" type="date" value-format="YYYY-MM-DD" clearable
										style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="deptId">
						<el-cascader v-model="form.deptId" :options="deptList" :props="deptProps" @change="handleDeptChange" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
					</el-form-item>
					<el-form-item label="是否启用" prop="status">
						<el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
					</el-form-item>
					<el-form-item label="性别" prop="gander">
						<sc-select v-model="form.gender" dict="gender" placeholder="请选择性别" style="width: 100%;"></sc-select>
					</el-form-item>
					<el-form-item label="身份证号" prop="idCard">
						<el-input v-model="form.idCard" placeholder="身份证号" clearable></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" prop="address">
						<el-input v-model="form.address" placeholder="家庭住址" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" v-model="form.remark" placeholder="备注" clearable style="width: 100%;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!=='show'" type="primary" :loading="isSaving" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			// 表单元素控制
			mode: "add",
			titleMap: {
				add: '新增',
				edit: '编辑',
				show: '查看'
			},
			visible: false,
			isSaving: false,
			// 所需数据选项
			roleList: [],
			postList: [],
			deptList: [],
			deptProps: {
				value: "id",
				label: "deptName",
				children: "children",
				multiple: false,
				checkStrictly: true
			},
			// 表单数据
			form: {
				id: null,
				avatar: null,
				username: null,
				password: '123456',
				nickname: null,
				mobile: null,
				deptId: null,
				roleIdList: [],
				postIdList: [],
				status: '1',
				realName: null,
				birthDate: null,
				address: null,
				gender: '1',
				idCard: null,
				remark: null
			},
			// 表单验证规则
			rules: {
				avatar: [
					{required: true, message: '请上传头像', trigger: 'blur'}
				],
				username: [
					{required: true, message: '请输入用户名', trigger: 'blur'}
				],
				nickname: [
					{required: true, message: '请输入昵称', trigger: 'blur'}
				],
				mobile: [
					{required: true, message: '请输入手机号', trigger: 'blur'}
				],
				status: [
					{required: true, message: '请选择是否启用', trigger: 'blur'}
				],
				password: [
					{required: true, message: '请输入密码', trigger: 'blur'}
				],
				deptId: [
					{required: true, message: '请选择所属部门', trigger: 'blur'}
				],
				roleIdList: [
					{required: true, message: '请选择所属角色', trigger: 'blur'}
				]
			}
		}
	},
	mounted() {
		this.getRole();
		this.getPost();
		this.getDept();
	},
	methods: {
		// 显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this;
		},
		// 表单注入数据
		setData(data) {
			this.form.id = data.id;
			this.form.avatar = data.avatar;
			this.form.username = data.username;
			this.form.nickname = data.nickname;
			this.form.mobile = data.mobile;
			this.form.status = data.status;
			this.form.realName = data.realName;
			this.form.birthDate = data.birthDate;
			this.form.address = data.address;
			this.form.gender = data.gender;
			this.form.idCard = data.idCard;
			this.form.remark = data.remark;
			this.form.deptId = data.deptId;
			const roleList = data.roleList;
			if (roleList) {
				roleList.forEach(e => this.form.roleIdList.push(e.id));
			}
			const postList = data.postList;
			if (postList) {
				postList.forEach(e => this.form.postIdList.push(e.id));
			}
		},
		// 加载树数据
		async getRole() {
			this.roleList = await this.$API.manage.role.list.get();
		},
		async getPost() {
			this.postList = await this.$API.manage.post.list.get();
		},
		async getDept() {
			this.deptList = await this.$API.manage.dept.list.get();
		},
		// 部门级联选择
		handleDeptChange(val) {
			this.form.deptId = val[val.length - 1];
		},
		// 表单提交
		submit() {
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					this.isSaving = true;
					if (this.form.id) {
						this.$API.manage.user.edit.put(this.form).then(() => {
							this.$emit('success');
							this.visible = false;
							this.$message.success("保存成功");
						}).catch(() => {
							this.isSaving = false;
						});
					} else {
						this.$API.manage.user.add.post(this.form).then(() => {
							this.$emit('success');
							this.visible = false;
							this.$message.success("保存成功");
						}).catch(() => {
							this.isSaving = false;
						});
					}
				}
			})
		}
	}
}
</script>

<style>
</style>
